<template>
	<view class="payment-body">
		<EmpireNavigate title="提交订单"></EmpireNavigate>
		<view class="box-padding__lr">
			<PaymentAddress></PaymentAddress>
			<PaymentProduct></PaymentProduct>
			<view class="">
				<view>
					<text>商品总价</text>
					<text>{{ price }}</text>
				</view>
				<view>
					<text>运费</text>
					<text>{{ transport }}</text>
				</view>
				<view>
					<text>优惠</text>
					<text>{{ discount }}</text>
				</view>
			</view>
		</view>
		<view class="payment-bottom__fixed empire-mall__flex-between">
			<text>还需支付：{{ unpaid }}</text>
			<EmpireButon type="warn">提交订单</EmpireButon>
		</view>
	</view>
</template>

<script setup>
import EmpireNavigate from '@/components/empire-navigate.vue';
import PaymentAddress from './payment-address.vue';
import PaymentProduct from './payment-product.vue';
import EmpireButon from '@/components/empire-button.vue';
import { ref } from 'vue';

const unpaid = ref();
</script>

<style lang="scss" scoped>
.payment-body {
}
.payment-bottom__fixed {
	position: fixed;
	bottom: 0;
	width: calc(100% - 40rpx);
	height: 96rpx;
	padding: 20rpx;
	border-top: 1px solid #e6e6e6;
	background-color: #fff;
}
</style>
